MongoDB와 연동

✒️ 2025-05-26 15:02 내용 수정

Node.js 교과서 개정 3판 내용 정리 추가

MongoDB와 MySQL 중에 사용할 DB로 연결해준다.
MySQL 연결은 MySQL과 연동 참고.

1. MongoDB 연결하기

VSC 터미널에서 npm install mongodb@5를 입력해서 mongodb 라이브러리를 설치한다.

nodejs setting 13.png

MongoDB에 Document를 추가한다.

node_mongo 1.png

server.js의 설정을 변경한다.
- 배열, 템플릿 리터럴, Nodejs 환경 설정, MongoDB#데이터베이스 연결 설정 참고.

// express 라이브러리 불러오기
const express = require('express');
const app = express();

// public 지정하기
app.use(express.static(__dirname + '/public/'));

// mongodb 설정 ----------------------------------------- 
const {MongoClient} = require('mongodb');

let db
// mongodb에서 connect url 가져오기
// <계정명>을 데이터베이스 계정 이름으로, <비밀번호>를 계정 비밀번호로 변경해야 함
const url = 'mongodb+srv://<계정명>:<비밀번호>@클러스터이름.자동생성키.mongodb.net/?retryWrites=true&w=majority'

// mongodb 객체를 만들고 mongodb에 연결
new MongoClient(url).connect().then((client)=>{
    console.log('db 연결 성공');
    
    db = client.db('<db 이름>'); // <db이름>을 Collection 이름으로 수정해야 함

	// 서버를 포트 번호로 연결
    app.listen(8081, () => {
        console.log('http://localhost:8081 에서 접속중');
    })
}).catch((err)=>{ // 접속 실패 시 에러 처리
    console.log(err);
});

// 연결한 mongodb에서 데이터 가져오기
app.get('/', async(request, response) => {
	// db에서 데이터를 가져와서 배열로 저장
	// <db이름>을 Collection 이름으로 수정해야 함
    let result = await db.collection('<db 이름>').find().toArray(); 
    // 배열의 데이터를 여러 개 꺼내서 저장하기 위한 변수
    let data = '';

    result.forEach((el) => {
        data += `${el.name} : ${el.color} : ${el.stock} <br>`
    })
    response.send(data)
})

node_mongo 2.png

2. ejs로 데이터를 HTML에 출력하기

VSC 터미널에서 npm install ejs로 ejs 라이브러리를 받는다.

nodejs setting 14.png

views 폴더 생성하고, 연결할 html 파일을 .ejs 확장자로 변경한다.
- Servlet, JSP(Jakarta Server Pages), 오라클과 연동, JSP 태그, Nodejs 환경 설정#3. 파일 연결 참고.
- response.render('파일이름.ejs', {데이터이름 : 저장할데이터}) 형식은 JSP에서 HttpServletRequest 객체에 request.setAttribute("이름", 데이터)로 페이지에 해당 데이터를 Attribute로 저장했던 것과 비슷하다.

// express 라이브러리 불러오기
const express = require('express');
const app = express();

// public 지정하기
app.use(express.static(__dirname + '/public/'));

// ejs 설정
app.set('view engine', 'ejs');

// mongodb 설정 ----------------------------------------- 
const {MongoClient} = require('mongodb');

let db
// mongodb에서 connect url 가져오기
// <계정명>을 데이터베이스 계정 이름으로, <비밀번호>를 계정 비밀번호로 변경해야 함
const url = 'mongodb+srv://<계정명>:<비밀번호>@클러스터이름.자동생성키.mongodb.net/?retryWrites=true&w=majority'

// mongodb 객체를 만들고 mongodb에 연결
new MongoClient(url).connect().then((client)=>{
    console.log('db 연결 성공');
    
    db = client.db('<db 이름>'); // <db이름>을 데이터베이스 이름으로 수정해야 함

	// 서버를 포트 번호로 연결
    app.listen(8081, () => {
        console.log('http://localhost:8081 에서 접속중');
    })
}).catch((err)=>{ // 접속 실패 시 에러 처리
    console.log(err);
});

// 연결한 mongodb에서 데이터 가져오기
app.get('/', async(request, response) => {
	// db에서 데이터를 가져와서 배열로 저장
	// <db이름>을 데이터베이스 이름으로 수정해야 함
    let result = await db.collection('<db 이름>').find().toArray();
    // 배열의 데이터를 여러 개 꺼내서 저장하기 위한 변수
    response.render('index.ejs', {저장할이름 : result});
})

연결할 html을 스크립트릿과 표현문을 써서 수정한다.
- JSP 태그#스크립트 태그, JSP 태그#표현문 참고.
- for문을 작성하다가 JSP에서 Java형태로 for(int i = 0)라고 작성했더니 syntax error가 발생했다. javascript 형태인 for(let i = 0)이라고 작성해야 오류가 뜨지 않는다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <h1>과일 진열대</h1>
    <table>
        <tr>
            <th>이름</th>
            <th>색상</th>
            <th>개수</th>
        </tr>

        <% for(let i = 0; i < study.length; i++) { %>
            <tr>
                <td><%= study[i].name %></td>
                <td><%= study[i].color %></td>
                <td><%= study[i].stock %></td>
            </tr>
        <% } %>
    </table>
</body>
</html>

CSS도 약간 수정해준다.

*{margin:0; padding:0;}
table{width: 200px;border:1px solid black; border-collapse: collapse; text-align: center;}
tr, th, td{border:1px solid black;}

node_mongo 3.png